<template>
  <div class="homeGoods">
    <van-search
      class="head"
      shape="round"
      placeholder="请输入搜索关键词"
      @search="onSearch"
      v-model="searchValue"
      show-action
    >
      <template #action>
        <div style="color: white;" @click="onSearch">搜索</div>
      </template>
    </van-search>
    <van-tabs class="head2" type="card">
      <van-tab title="首页">
        <home-goods-find />
      </van-tab>
      <van-tab title="综合">
        <recommend-list materialId="3756" />
      </van-tab>
      <van-tab title="女装">
        <recommend-list materialId="3767" />
      </van-tab>
      <van-tab title="家居家装	">
        <recommend-list materialId="3758" />
      </van-tab>
      <van-tab title="数码家电">
        <recommend-list materialId="3759" />
      </van-tab>
      <van-tab title="鞋包配饰">
        <recommend-list materialId="3762" />
      </van-tab>
      <van-tab title="美妆个护">
        <recommend-list materialId="3763" />
      </van-tab>
      <van-tab title="男装">
        <recommend-list materialId="3764" />
      </van-tab>
      <van-tab title="内衣">
        <recommend-list materialId="3765" />
      </van-tab>
      <van-tab title="母婴">
        <recommend-list materialId="3760" />
      </van-tab>
      <van-tab title="食品">
        <recommend-list materialId="3761" />
      </van-tab>
      <van-tab title="运动户外">
        <recommend-list materialId="3766" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import HomeGoodsFind from "@/views/home/components/HomeGoodsFind.vue";
import RecommendList from "@/views/home/components/RecommendList.vue";

import { Button, Search, PullRefresh, Tab, Tabs, Icon, Dialog } from "vant";

export default {
  name: "HomeGoodsNew",
  components: {
    RecommendList,
    HomeGoodsFind,
    [Button.name]: Button,
    [Search.name]: Search,
    [PullRefresh.name]: PullRefresh,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Icon.name]: Icon
  },
  data() {
    return {
      isLoading: false,
      searchValue: "",
      scrollTop: 0
    };
  },
  mounted: function() {
    let vm = this;
    this.$nextTick(function() {
      this.init();
    });
  },
  // beforeRouteEnter(to, from, next) {
  //   next(vm => {
  //     console.log("渲染", vm.scrollTop);
  //     document.documentElement.scrollTop = vm.scrollTop;
  //   });
  // },
  // beforeRouteUpdate(to, from, next) {
  //   scrollTo(0, this.scrollTop);
  //   console.log(this.scrollTop)
  // },
  // beforeRouteLeave(to, from, next) {
  //   this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  //   next()
  // },
  methods: {
    init() {},
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
      }, 500);
    },
    onSearch(value) {
      this.$router.push({ name: "Search", params: { q: this.searchValue } });
    }
  }
};
</script>

<style scoped>
.head2 >>> .van-tabs__nav--card {
  border: none;
}

.head2 >>> .van-hairline--top-bottom::after,
.head2 >>> .van-hairline-unset--top-bottom::after {
  border: none;
}

.head2 >>> [class*="van-hairline"]::after {
  content: none;
}

.head2 >>> .van-tabs__wrap,
.head2 >>> .van-tab,
.head2 >>> .van-tabs__nav,
.homeGoods .van-search {
  background-color: #ff3030;
}

.head2 >>> .van-tab__pane {
  padding: 10px;
}

.head2 >>> .van-tabs__wrap {
  height: 38px;
}

.head2 >>> .van-tab {
  border: none;
  color: white;
  background-color: transparent;
}

.head2 >>> .van-tab.van-tab--active {
  background-color: white;
  color: #ff3030;
  border-radius: 15px;
}

.head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 54px;
  overflow: hidden;
  overflow-y: scroll;
  z-index: 1000;
}

.head2 {
  margin: 54px 0;
  background-color: #eee;
}


</style>